<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
     margin: 0;
     padding: 0;
    }
    .nav{
      width: 500px;
      height: 800px;
      margin: 0 auto;
      background-color: rgb(187, 170, 156);
    }
    form{
      width: 200px;
      margin: 0 auto;
    }
    .aaa{
      width: 100%;
      margin: 0 auto;
      background-color: skyblue;
      margin-bottom: 20px;
    }
    ul li{
      text-decoration: none;
      list-style: none;
      background-color: chartreuse;
      margin-bottom: 10px;
      display: flex;
      height: 30px;
      align-items: center;
    }
    p{
      margin-right: 80px;
      font-size: 20px;

    }
    .aaaaa{
      width: 20px;
      height: 20px;
    }
  </style>
</head>
<body>
  <div class="nav">
    <form action="">
      添加<input type="text">
    </form>
    <section>
      <div class="aaa">已加入</div>
      <ul>
          <li data-id="">
            <p></p>
            <input type="checkbox" class="aaaaa">
            <a></a>
          </li>
      </ul>
    </section>
  </div>
  <script src="../todolist/node_modules/jquery/dist/jquery.min.js"></script>
  <script>
    function bindLink(ele,res){
      let str = ''
      ele.forEach(item => {
        str += `
              <li data-id="${item.id}">
                <p>${item.title}</p>
                <input type="checkbox">
                <a></a>
              </li>
      `
      })
      res.innerHTML = str
    }
    // 抓取元素
    const ulInp = document.querySelector('ul')
    const formInp = document.querySelector('form')
    const inp = document.querySelector('input')
    // 发ajax，直接渲染
     const res = $.ajax({
      url:"http://localhost:8080/data",
      type:"get",
      dataType:"json",
      async:false,
      success(data){
        console.log(data)
        return data
      },
    
    })
    const data = res.responseJSON
    bindLink(data,ulInp)

    formInp.addEventListener('submit', e => {
      // 阻止默认事件
      e = e || window.Event
      try { e.preventDefault() } catch(err) { e.returnValue = false }
      
      // 获取输入的value
      const value = inp.value
      // 正则条件
      const result = value.search(/['admin'|'user'|'aaa']/g)
      // 正则判断
      if(result !== -1)  return alert('这个不行哦！')
      console.log(value);

      inp.value = ''
      const obj = {}
      obj.title = value
      window.localStorage.setItem('id',JSON.stringify(obj))
      data.push(obj)
      bindLink(data,ulInp)
      // p判断
      // if(!window.localStorage.getItem('id')){
      //   let arr = data
      //   arr.push(obj)
      //   window.localStorage.setItem('id',JSON.stringify(arr))
      //   console.log(arr);
  
      // }else{
      //   const arr = JSON.parse(window.localStorage.getItem('id'))
      //   arr.push(obj)
      //   window.localStorage.setItem('id',JSON.stringify(arr))
      // }
      // const brr = JSON.parse(window.localStorage.getItem('id')) 
    })
    
   
  </script>
</body>
</html>